docs(getting-started): update

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

@@ -5,11 +5,9 @@ navigation:
     label: Todo
 ---
 
-## Theme
+## Color variant
 
-In the [Theme](/getting-started/theme) section, we've seen how to customize our Tailwind CSS theme and that each component has a theme defined with `slots` and `variants`.
-
-Some components also have a `color` prop, which allows you to customize the color of the component.
+In the previous section, we explored how components have themes that can include `variants`, which are reflected in their props. One common variant is `color`. Let's examine this using the [Button](/components/button) component as an example:
 
 ::component-code{slug="button"}
 ---
@@ -20,4 +18,70 @@ slots:
 ---
 ::
 
-## Color Aliases
+These `color` variants are generated based on the default Tailwind CSS colors, you can change this by using the [`colors`](/getting-started/installation#colors) option in your `nuxt.config.ts` to select only the colors you're actually using.
+
+For example, you've added a custom `cerise` color and only use the default `blue` and `green` colors in your application.
+
+```css [main.css]
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@theme {
+  --color-cerise-50: #fef2f4;
+  --color-cerise-100: #fde6e9;
+  --color-cerise-200: #fbd0d9;
+  --color-cerise-300: #f7aab9;
+  --color-cerise-400: #f27a93;
+  --color-cerise-500: #e63f66;
+  --color-cerise-600: #d42a5b;
+  --color-cerise-700: #b21e4b;
+  --color-cerise-800: #951c45;
+  --color-cerise-900: #801b40;
+  --color-cerise-950: #470a1f;
+}
+```
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui'],
+  ui: {
+    colors: ['cerise', 'blue', 'green']
+  }
+})
+```
+
+This configuration will ensure that only classes for those three colors are generated in your final CSS bundle and that the `color` prop will be typed and provide autocompletion in your editor with those three colors.
+
+```vue
+<template>
+  <UButton color="cerise">Button</UButton>
+</template>
+```
+
+::caution
+Make sure to use color ranges from `50` to `950` when you define your colors. You can use tools like [UI Colors](https://uicolors.app/) to generate your palette.
+::
+
+## Runtime colors
+
+Nuxt UI generates CSS variables for color management. Among these, you'll find `primary` and `gray` color aliases, which are specifically introduced by Nuxt UI to simplify component styling and provide a consistent color scheme across your application.
+
+You can configure those aliases in your `app.config.ts` file under the `ui.colors` key:
+
+- The `gray` alias can be any of the default Tailwind CSS colors: `slate`, `cool` (renamed from `gray`), `zinc`, `neutral` or `stone`. Defaults to `cool`.
+- The `primary` alias can be any of the other colors including your custom ones. Defaults to `green`.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'cerise',
+      gray: 'zinc'
+    }
+  }
+})
+```
+
+::tip
+The aliases colors can be removed from the `colors` option in your `nuxt.config.ts` if you don't use them specifically. For example if `primary`'s target is `cerise` you don't have to select `cerise`, this will reduce the bundle even more.
+::