diff --git a/docs/content/1.getting-started/4.colors.md b/docs/content/1.getting-started/4.colors.md index 2f13e04c..ca3998c8 100644 --- a/docs/content/1.getting-started/4.colors.md +++ b/docs/content/1.getting-started/4.colors.md @@ -70,9 +70,13 @@ This configuration will ensure that only classes for those three colors are gene Nuxt UI introduces three key color aliases used to style components: -1. `primary`{color="primary"}: Main brand color. Default: `green`{color="green"}. -2. `error`{color="error"}: For error states. Default: `red`{color="red"}. -3. `gray`: Neutral color for backgrounds, text, etc. Default: `cool`. +- `primary`: Main brand color, used as the default color for components. + - Default: `green`{color="green"} +- `error`: For form error validation states. + - Default: `red`{color="red"} +- `gray`: Neutral color for backgrounds, text, etc. + - Default: `slate` + - `slate | cool | zinc | neutral | stone` ::warning{to="https://tailwindcss.com/docs/customizing-colors#default-color-palette" target="_blank"} The Tailwind CSS `gray` color is renamed to `cool` in Nuxt UI to avoid conflicts with the `gray` alias. @@ -85,7 +89,7 @@ export default defineAppConfig({ ui: { colors: { primary: 'blue', - error: 'red', + error: 'orange', gray: 'zinc' } } @@ -103,7 +107,7 @@ These alias colors don't need to be explicitly listed in the `colors` option of :: ::note -You can try this out by clicking on the :prose-icon{name="i-heroicons-swatch-20-solid" class="text-primary-500 dark:text-primary-400"} button in the header of this documentation. +You can try this out by using the :prose-icon{name="i-heroicons-swatch-20-solid" class="text-primary-500 dark:text-primary-400"} menu in the header of this documentation. :: ### Custom aliases diff --git a/src/module.ts b/src/module.ts index e011e81f..21f4ce5e 100644 --- a/src/module.ts +++ b/src/module.ts @@ -63,7 +63,7 @@ export default defineNuxtModule({ colors: { primary: 'green', error: 'red', - gray: 'cool' + gray: 'slate' }, icons })