From 075eee860d0c1cb43b09c28c189ede8aec98c5fd Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 7 Mar 2024 16:09:00 +0100
Subject: [PATCH] playground: update

---
 playground/app.config.ts     |  5 ++++-
 playground/pages/button.vue  | 36 ++++++++++++++++++++++++++++++------
 playground/pages/tooltip.vue |  2 +-
 3 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/playground/app.config.ts b/playground/app.config.ts
index ee42683c..880dfdd9 100644
--- a/playground/app.config.ts
+++ b/playground/app.config.ts
@@ -5,9 +5,12 @@ export default defineAppConfig({
       base: 'font-semibold',
       variants: {
         color: {
-          pink: 'bg-pink-500 text-white'
+          toto: 'bg-pink-500 text-white'
         }
       }
+    },
+    container: {
+      base: 'max-w-5xl'
     }
   }
 })
\ No newline at end of file
diff --git a/playground/pages/button.vue b/playground/pages/button.vue
index 6e8927c1..2cc6a019 100644
--- a/playground/pages/button.vue
+++ b/playground/pages/button.vue
@@ -1,9 +1,33 @@
 <template>
-  <div class="flex gap-1">
-    <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" />
-    <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" variant="outline" />
-    <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" variant="soft" />
-    <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" variant="ghost" />
-    <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" variant="link" />
+  <div class="flex flex-col gap-3">
+    <div class="flex gap-1.5">
+      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" />
+      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" variant="outline" />
+      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" variant="soft" />
+      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" variant="ghost" />
+      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" variant="link" />
+    </div>
+
+    <div class="flex gap-1.5">
+      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="indigo" />
+      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="indigo" variant="outline" />
+      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="indigo" variant="soft" />
+      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="indigo" variant="ghost" />
+      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="indigo" variant="link" />
+    </div>
+
+    <div class="flex gap-1">
+      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="white" />
+      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="white" variant="ghost" />
+    </div>
+    <div class="flex gap-1">
+      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="gray" />
+      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="gray" variant="ghost" />
+      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="gray" variant="link" />
+    </div>
+    <div class="flex gap-1">
+      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="black" />
+      <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" color="black" variant="link" />
+    </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/playground/pages/tooltip.vue b/playground/pages/tooltip.vue
index 00e65f52..b4d97f43 100644
--- a/playground/pages/tooltip.vue
+++ b/playground/pages/tooltip.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex gap-1">
+  <div class="flex gap-1.5">
     <UTooltip text="Tooltip">
       <UButton icon="i-heroicons-rocket-launch" to="/" label="Button" />
     </UTooltip>