feat(module): add DEFAULT shade to primary color (#493)

docs/app.vue

@@ -4,9 +4,9 @@
     <UHeader>
       <template #left>
         <NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
-          <Logo class="w-8 h-8 text-primary-500 dark:text-primary-400" />
+          <Logo class="w-8 h-8 text-primary" />
 
-          <span class="hidden sm:block">NuxtLabs</span><span class="sm:text-primary-500 dark:sm:text-primary-400">UI</span>
+          <span class="hidden sm:block">NuxtLabs</span><span class="sm:text-primary">UI</span>
         </NuxtLink>
       </template>
 

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

@@ -8,6 +8,8 @@ This module relies on Nuxt [App Config](https://nuxt.com/docs/guide/directory-st
 
 ## Colors
 
+### Configuration
+
 Components are based on a `primary` and a `gray` color. You can change them in your `app.config.ts`.
 
 ```ts [app.config.ts]
@@ -25,6 +27,8 @@ Try to change the `primary` and `gray` colors by clicking on the :u-icon{name="i
 
 As this module uses Tailwind CSS under the hood, you can use any of the [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) or your own custom colors. By default, the `primary` color is `green` and the `gray` color is `cool`.
 
+### CSS Variables
+
 To provide dynamic colors that can be changed at runtime, this module uses CSS variables. As Tailwind CSS already has a `gray` color, the module automatically renames it to `cool` to avoid conflicts (`coolGray` was renamed to `gray` when Tailwind CSS v3.0 was released).
 
 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.
@@ -33,6 +37,10 @@ Likewise, you can't define a `primary` color in your `tailwind.config.ts` as it
 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`.
 ::
 
+The `primary` color also has a `DEFAULT` shade that changes based on the theme. It is `500` in light mode and `400` in dark mode. You can use as a shortcut in your components and pages, e.g. `text-primary`, `bg-primary`, `focus-visible:ring-primary`, etc. :u-badge{label="Edge" class="!rounded-full" variant="subtle"}
+
+### Smart Safelisting
+
 Components having a `color` prop like [Avatar](/elements/avatar#chip), [Badge](/elements/badge#style), [Button](/elements/button#style), [Input](/forms/input#style) (inherited in [Select](/forms/select) and [SelectMenu](/forms/select-menu)), [Radio](/forms/radio), [Checkbox](/forms/checkbox), [Toggle](/forms/toggle), [Range](/forms/range) and [Notification](/overlays/notification#timeout) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
 
 Variant classes of those components are defined with a syntax like `bg-{color}-500 dark:bg-{color}-400` so they can be used with any color. However, this means that Tailwind will not find those classes and therefore will not generate the corresponding CSS.
@@ -67,33 +75,9 @@ export default defineNuxtConfig({
 
 This can also happen when you bind a dynamic color to a component: `<UBadge :color="color" />`, `<UAvatar :chip-color="statuses[user.status]" />`, etc. In this case, you'll need to safelist the possible color values manually as well.
 
-## Dark mode
-
-All the components are styled with dark mode in mind.
-
-Thanks to [Tailwind CSS dark mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) class strategy and the [@nuxtjs/color-mode](https://github.com/nuxt-modules/color-mode) module, you literally have nothing to do.
-
-::callout{icon="i-heroicons-puzzle-piece"}
-Learn how to build a color mode button in the [Examples](/getting-started/examples#color-mode-button) page.
-::
-
-You can disable dark mode by setting the `preference` to `light` instead of `system` in your `nuxt.config.ts`.
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  colorMode: {
-    preference: 'light'
-  }
-})
-```
-
-::callout{icon="i-heroicons-light-bulb"}
-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.
-::
-
 ## Components
 
-Components are styled with Tailwind CSS but classes are all defined in the default [app.config.ts](https://github.com/nuxtlabs/ui/blob/dev/src/runtime/app.config.ts) file. You can override them in your `app.config.ts`.
+Components are styled with Tailwind CSS but classes are all defined in the default [app.config.ts](https://github.com/nuxtlabs/ui/blob/dev/src/runtime/app.config.ts) file. You can override those in your own `app.config.ts`.
 
 ```ts [app.config.ts]
 export default defineAppConfig({
@@ -135,6 +119,30 @@ export default defineAppConfig({
 })
 ```
 
+## Dark mode
+
+All the components are styled with dark mode in mind.
+
+Thanks to [Tailwind CSS dark mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) class strategy and the [@nuxtjs/color-mode](https://github.com/nuxt-modules/color-mode) module, you literally have nothing to do.
+
+::callout{icon="i-heroicons-puzzle-piece"}
+Learn how to build a color mode button in the [Examples](/getting-started/examples#color-mode-button) page.
+::
+
+You can disable dark mode by setting the `preference` to `light` instead of `system` in your `nuxt.config.ts`.
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  colorMode: {
+    preference: 'light'
+  }
+})
+```
+
+::callout{icon="i-heroicons-light-bulb"}
+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.
+::
+
 ## Icons
 
 You can use any icon (100,000+) from [Iconify](https://iconify.design/).