docs: use ::tip everywhere

docs/content/1.getting-started/3.colors.md

@@ -17,7 +17,7 @@ export default defineAppConfig({
 })
 ```
 
-::callout{icon="i-heroicons-light-bulb"}
+::tip
 Try to change the `primary` and `gray` colors by clicking on the :u-icon{name="i-heroicons-swatch-20-solid" class="w-4 h-4 align-middle text-primary-500 dark:text-primary-400"} button in the header.
 ::
 
@@ -58,7 +58,7 @@ To provide dynamic colors that can be changed at runtime, this module uses CSS v
 
 Likewise, you can't define a `primary` color in your `tailwind.config.ts` as it would conflict with the `primary` color defined by the module.
 
-::callout{icon="i-heroicons-light-bulb"}
+::tip
 We'd advise you to use those colors in your components and pages, e.g. `text-primary-500 dark:text-primary-400`, `bg-gray-100 dark:bg-gray-900`, etc. so your app automatically adapts when changing your `app.config.ts`.
 ::
 

docs/content/1.getting-started/5.theme.md

@@ -19,7 +19,7 @@ export default defineAppConfig({
 })
 ```
 
-::callout{icon="i-heroicons-light-bulb"}
+::tip
 Try to change the `primary` and `gray` colors by clicking on the :u-icon{name="i-heroicons-swatch-20-solid" class="w-4 h-4 align-middle text-primary-500 dark:text-primary-400"} button in the header.
 ::
 
@@ -60,7 +60,7 @@ To provide dynamic colors that can be changed at runtime, this module uses CSS v
 
 Likewise, you can't define a `primary` color in your `tailwind.config.ts` as it would conflict with the `primary` color defined by the module.
 
-::callout{icon="i-heroicons-light-bulb"}
+::tip
 We'd advise you to use those colors in your components and pages, e.g. `text-primary-500 dark:text-primary-400`, `bg-gray-100 dark:bg-gray-900`, etc. so your app automatically adapts when changing your `app.config.ts`.
 ::
 
@@ -113,7 +113,7 @@ Each component has a `ui` prop that allows you to customize everything specifica
 </template>
 ```
 
-::callout{icon="i-heroicons-light-bulb"}
+::tip
 You can find the default classes for each component under the `Config` section.
 ::
 
@@ -199,6 +199,6 @@ export default defineNuxtConfig({
 })
 ```
 
-::callout{icon="i-heroicons-light-bulb"}
+::tip
 If you're stuck in dark mode even after changing this setting, you might need to remove the `nuxt-color-mode` entry from your browser's local storage.
 ::